<template>
  <div class="index-main">
    <div class="wid demo-main">
      <h1><a href="https://www.npmjs.com/package/nprogress">页面跳转进度条插件（nprogress）</a></h1>
      <el-button type="primary" @click="xin.goUrl('/demo')">跳转demo(显示进度条)</el-button>
      <h1><a href="http://momentjs.cn/" target="_blank">时间格式化（moment）</a></h1>
      <el-table
          :data="tableData"
          style="width: 100%">
        <el-table-column
            prop="name"
            label="片段"
        >
        </el-table-column>
        <el-table-column
            prop="date"
            label="日期"
        >
        </el-table-column>
        <el-table-column
            prop="format"
            label="格式"
        >
        </el-table-column>
        <el-table-column
            prop="time"
            label="转换后"
            :formatter="formatter"
        >
        </el-table-column>
      </el-table>
       <h1><a href="https://www.dowebok.com/demo/2014/98/">动画（Animate.css）</a></h1>
      <el-button type="info" @click="staRtAnimate">执行动画</el-button>
      <ul class="animte-box" v-if="animateFlag">
        <li class="animated fadeInLeft"></li>
        <li class="animated bounce"></li>
        <li class="animated bounceIn"></li>
        <li class="animated flipInX"></li>
        <li class="animated rubberBand"></li>
      </ul>
      <div class="animte-box" v-else>
      </div>
      <h1><a href="http://www.axios-js.com/">axios</a></h1>
      <el-button type="primary" @click="sendGet">发送get</el-button>
      <el-button type="success" @click="sendPost">发送post</el-button>
      <div class="request-data">
         <div>{{requestData}}</div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: '',
  data() {
    return {
      animateFlag:true,
      tableData: [
        {name: '时区时间', date: '2021-01-01T05:06:07', format: 'LLLL', time: ''},
        {name: '格式时间', date: '2021-01-01 12:54', format: 'YYYY-MM-DD', time: ''},
        {name: '时间戳（毫秒）', date: 1610256604000, format: 'MMMM Do YYYY, h:mm:ss', time: ''},
      ],
      requestData:''
    };
  },
  components: {},
  mounted() {
  },
  methods: {
    staRtAnimate(){
      this.animateFlag = false
      setTimeout(()=>{
          this.animateFlag = true
      },100)
    },
    formatter(row) {
      // 格式化每行的代码
      let {date,format} = row
      return this.$moment(date).format(format);
    },
    sendGet(){
      let data = {
        type:'shehui',
        key:'4c7e83660e7e98c2d10fda5db210f6ba'
      }
      this.$api.getNews(data).then(res=>{
        this.$message({message:'请求发送成功',type:'success'})
        this.requestData = JSON.stringify(res)
      }).catch(err=>{
        console.log(err)
      })
    },
    sendPost(){
      let data = {
        type:'guoji',
        key:'4c7e83660e7e98c2d10fda5db210f6ba'
      }
      this.$api.getCity(data).then(res=>{
        this.$message({message:'请求发送成功',type:'success'})
        this.requestData = JSON.stringify(res)
      }).catch(err=>{
        console.log(err)
      })
    }
  },

}

</script>
<style lang='scss' scoped>

.index-main {
  .request-data{
    height: 400px;
    overflow-y: scroll;
    overflow-x: hidden;
    background: #fafafa;
    padding: 20px;
    border-radius: 20px;
    margin-top: 40px;
    color: #666;
    line-height: 2;
    margin-bottom: 100px;
  }
  h1{
    a{
      color: #333;
      display: block;
      margin: 40px 0 40px 0;
      font-size: 20px;
      font-weight: bold;
      transition: .5s;
      &:hover{
        color:blueviolet;
      }
    }
  }
  .animte-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 50px;
    height: 200px;
    li{
      width: 200px;
      height: 200px;
      background: #42b983;
    }
  }
}
</style>